<template>
    <div class="wrapper">
        <div v-if="isAndroid" class="status-bar" :style="{'height': statusHeight}"></div>
        <bui-header title="小组" @leftClick="menuShow" backgroundColor="#f49428">
        </bui-header>
        <text class="menuIcon" @click="menuShow">&#xe790;</text>
        <div style="margin-left:20;margin-right:20">
            <div class="titleDiv">
                <text class="title1">组内今日维保单概况</text>
                <switch class="switch" checked="true" @change="switchChart"></switch>
            </div>
            <div v-if="showChart" class="chart">
                <div class="chartLeft">
                    <bmchart style="width:500;height:400" :options="$format(pieData)" @finish='finish'></bmchart>
                </div>
                
                <div class="chartRight">
                    <div class="home-pie">
                        <text class="home-pie-text">今日组内总共</text>
                        <text class="home-pie-number">{{allTeamComplete}}</text>
                    </div>
                </div>
            </div>
            <text class="title">今日概况</text>
            <bui-tabbar :tabItems="tabTitles" 
                    showSelectedLine=true 
                    @change="onItemChange" 
                    v-model="currentTab"
                    background="#e0e0e0"
                    selectedBackground="#2590f5"
                    normalColor="#666666"
                    selectedColor="#ffffff"
                    borderBottomColor="#2590f5"
                    titleSize="30px"></bui-tabbar>
            <slider class="slider" @change="onSliderChange" :index="currentTab">
                <scroller class="container" :style="scrollerStyle" alwaysScrollableVertical="true">
                    <refresh  v-show="refreshing" class="refresh" @refresh="onrefresh()" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                        <loading-indicator class="indicator"></loading-indicator>
                    </refresh>
                    <div class="list" :style="refreshStyle">
                        <wxc-cell @wxcCellClicked="goToTeamPolicy(null,item.staffId,null)" v-for="(item,index) in teamList" :key="index" :title='item.staffName'>
                            <image class="image" slot="label" src="bmlocal://assets/person.png"></image>
                            <text :style="valueStyle">{{(item.todayCount?item.todayCount:0)+'单'}}</text>
                        </wxc-cell>
                    </div>
                </scroller>
                <scroller class="container" :style="scrollerStyle" alwaysScrollableVertical="true">
                    <refresh  v-show="refreshing" class="refresh" @refresh="onrefresh()" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                        <loading-indicator class="indicator"></loading-indicator>
                    </refresh>
                    <div class="list" :style="refreshStyle">
                        <wxc-cell @wxcCellClicked="goToTeamPolicy(null,null,item.comId)" v-for="(item,index) in communityList" :key="index" :title='item.comName'>
                            <image class="image" slot="label" src="bmlocal://assets/client.png"></image>
                            <text :style="valueStyle">{{(item.upkeepCount?item.upkeepCount:0)+'单'}}</text>
                        </wxc-cell>
                    </div>
                </scroller>
            </slider>
        </div>
        <wxc-loading :show="showLoading" :need-mask="mask"></wxc-loading>
        <menu :showMenu="showMenu" @closeMenu="menuClose"></menu>
    </div>
</template>
<script>
import menu from '../common/menu'
import util from '../utils/util';
import {buiHeader,buiIcon,buiTabbar} from 'bui-weex'
import { WxcTabPage, Utils,WxcCell,WxcButton,WxcLoading } from 'weex-ui';
export default {
    components: {
        buiHeader,
        buiIcon,
        WxcTabPage,
        Utils,
        WxcCell,
        WxcButton,
        WxcLoading,
        menu,
        buiTabbar
    },
    created() {
        
    },
    data() {
        return {
            token:'',
            isAndroid:false,
            tabTitles: [
                {
                title: '人员分配概况',
                },
                {
                title: '小区分配概况',
                }
            ],
            currentTab: 0,
            tabStyles: {
                bgColor: '#e0e0e0',
                titleColor: '#666666',
                activeTitleColor: '#fff',
                activeBgColor: '#2590f5',
                isActiveTitleBold: true,
                // iconWidth: 70,
                // iconHeight: 70,
                width: 355,
                height: 100,
                fontSize: 30,
                hasActiveBottom: true,
                // textPaddingLeft: 10,
                // textPaddingRight: 10,
                // normalBottomColor: 'rgba(0,0,0,0.4)',
                // normalBottomHeight: 1,
                hasRightIcon: true,
            },
            valueStyle:{
                color:'#999999',
                marginRight:40
            },
            textStyle:{
                color:'#ffffff'  
            },
            btn1Style:{
                backgroundColor:'#ea9527',
                borderColor: '#ea9527',
            },
            btn2Style:{
                backgroundColor:'#f35e4d',
                borderColor: '#f35e4d',
                // marginRight:40
            },
            refreshStyle:{},
            teamList: [],
            communityList: [],
            allTeamComplete: 0,
            distributeCount: '已分配',
            unallocatedCount: '未分配',
            tabPageHeight: 1334,
            showLoading:false,
            mask:true,
            showMenu:false,
            refreshing: false,
            showChart:true,
            leftItem: {
                text: '菜单',
            },
            containerHeight:'',
            statusHeight: Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40),
            pieData: {
                tooltip: {
                    show: true
                },
                legend: {
                orient: 'vertical',
                right: '1%',
                top: '30%',
                data: ['进行中', '已完成', '已分配', '未分配']
                },
                series: [
                {
                    // name: '访问来源',
                    type: 'pie',
                    hoverAnimation: false,
                    radius: ['30%', '80%'],
                    center: ['35%', '50%'],
                    // avoidLabelOverlap: false,
                    label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: 'inner',
                        formatter: (obj) => {
                        return obj.value === 0 ? ' ' : obj.value
                        },
                        fontWeight: 'bolder',
                        fontSize: 14
                    }
                    // emphasis: {
                    //   show: true,
                    //   textStyle: {
                    //     fontSize: '30',
                    //     fontWeight: 'bold'
                    //   }
                    // }
                    },
                    itemStyle: {
                    normal: {
                        // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function (params) {
                        var colorList = ['rgb(244, 148, 40)', 'rgb(14, 202, 147)', 'rgb(239, 88, 73)', 'rgb(37,144,245)']
                        return colorList[params.dataIndex]
                        }
                    }
                    },
                    data: []
                }
                ]
            }
        }
    },
    methods: {
        menuShow(){
            this.showMenu = true
        },
        menuClose(){
            this.showMenu = false
        },
        onrefresh(){
            this.refreshing = true
            this.retrieveTeamAndCommunityOverView()
        },
        switchChart(){
            this.showChart = !this.showChart
            if(this.showChart){
                this.scrollerStyle ={ height: this.containerHeight + 'px' }
            }else{
                if(this.isAndroid){
                    this.scrollerStyle ={ height: this.containerHeight+200 + 'px' }
                }else{
                    this.scrollerStyle ={ height: this.containerHeight+400 + 'px' }
                }
                
                
            }
        },
        onSliderChange(e){
            var index = e.index;
            this.currentTab=index;
        },
        //小组保单页面
        goToTeamPolicy(status,staffId,comId){
            this.$router.open({
                name: 'teamPolicy',
                params:{status:status,staffId:staffId,comId:comId}
            })
        },
        goToDetailPerson (item) {
            // this.$router.push({name: 'teamUpkeep', params: {staff: {staff1Id: item.staffId, staffName: item.staffName}}})
        },
        goToDetailCommunity (item) {
            // this.$router.push({name: 'teamUpkeep', params: {com: {comId: item.comId, comName: item.comName}}})
        },
        retrieveTeamAndCommunityOverView(){
            let filter={}
            this.showLoading = true
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'GET',    
                name: 'todayTeamAndCommunityOverView',
                data: filter
            }).then(resData => {
                if(resData.success){
                    this.teamList = resData.data ? resData.data.teamMemberUpkeepCount : []
                    this.communityList = resData.data ? resData.data.communityUpkeepCount : []
                    this.$storage.set('teamMemberUpkeepCount', JSON.stringify(resData.data.teamMemberUpkeepCount))
                    this.$storage.set('communityUpkeepCount', JSON.stringify(resData.data.communityUpkeepCount))
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
            }, error => {
                this.$notice.toast({
                    message: '网络错误'
                })
            })
            this.showLoading = false
            setTimeout(() => {
                this.refreshing = false
            }, 500)
        },
        retrieveTodayTeamUpkeepOverview(){
            let filter={}
            this.$fetch({
                header:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': `Bearer `+ this.token
                },
                method: 'GET',    
                name: 'todayTeamUpkeepOverview',
                data: filter
            }).then(res => {
                if(res.success){
                    this.allTeamComplete = res.data ? res.data.allTeamComplete : 0
                    this.distributeCount = res.data ?'已分配' + res.data.upkeepCount.distributeCount + '单' : '已分配0单'
                    this.unallocatedCount =res.data ?'未分配' + res.data.upkeepCount.unallocatedCount + '单' : '未分配0单'
                    this.pieData.series[0].data = res.data ? [
                        {name: '进行中', value: res.data.upkeepCount.processingCount},
                        {name: '已完成', value: res.data.upkeepCount.completedCount},
                        {name: '已分配', value: res.data.upkeepCount.distributeCount},
                        {name: '未分配', value: res.data.upkeepCount.unallocatedCount}
                    ] : []
                }else{
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }
            }, error => {
                this.$notice.toast({
                    message: '网络错误'
                })
            })
        },
        
    },
    created(){
        this.$notice.loading.show()
        this.isAndroid = Utils.env.isAndroid()
        if(Utils.env.isAndroid()){
            this.refreshStyle = {marginTop:'-100px'}
        }
        const tabPageHeight = Utils.env.getPageHeight()
        if(Utils.env.isIOS()){
            this.containerHeight = tabPageHeight-this.tabStyles.height-135-550
        }else{
            this.containerHeight = tabPageHeight-this.tabStyles.height-400-90-110-260
        }
        this.scrollerStyle = { height: this.containerHeight + 'px' }

        // 获取token
        this.token = this.$storage.getSync('token')
        if(!this.token){
            this.$router.setHomePage('/pages/login.js')
        }

        //获取缓存数据
        this.$storage.get('teamMemberUpkeepCount').then(resData => {
             this.teamList = JSON.parse(resData);
        },error => {
            this.retrieveTeamAndCommunityOverView()
        })

        this.$storage.get('communityUpkeepCount').then(resData => {
            this.communityList = JSON.parse(resData);
        },error => {
            this.retrieveTeamAndCommunityOverView()
        })

        //获取统计数据
        this.retrieveTodayTeamUpkeepOverview()
        this.$notice.loading.hide()
    }
    
}
</script>
<style scoped>
.status-bar{
    background-color:#f49428;
}
.image {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}
.container {
    width: 750px;
    background-color: #f2f3f4;
}
.refresh {
    width: 750px;
    height: 100px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}
.indicator {
    height: 80px;
    width: 80px;
    color: #f49428;
}
.chart{
    background-color: #ffffff;
    flex-direction: row;
}
.chartLeft{
    flex:7;
    height: 400px;
}
.chartRight{
    flex:3;
    height: 400px;
    border-left-width: 1;
    border-color: #e2e2e2;
    flex-direction:column;
    justify-content:center;
}
.home-pie{
    height: 200px;
}
.home-pie-text{
  text-align: center; 
  color:#90908D;
  font-size:30px;
  margin-top: 50px;
}
.home-pie-number{
  text-align: center;
  font-size:50px;
  font-weight: bold;
}
.title{
    color: #999999;
    margin: 10 0 10 10;
    font-size: 25;
}
.titleDiv{
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.title1{
    flex: 6;
    color: #999999;
    margin: 10 0 10 10;
    font-size: 25;
}
.switch{
    flex: 1;
    margin: 10 0 10 10;
}
.div-button{
    flex-direction: row;
    justify-content: space-around;
    /* margin-right: 30px; */
    /* margin-left: 10px; */
    margin-top:10;
}
.menuIcon{
    font-family: iconfont;
    color: #ffffff;
    font-size: 50px;
    position: absolute;
    top: 65;
    left: 20;
}
</style>

